<!DOCTYPE html>
<html>
<head>
	<title>CANVAS test</title>
	<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
	<style type="text/css">
	</style>
	<script type="text/javascript">
	function d2r(d){
		return d * (Math.PI / 180);
	}
	function r2d(r){
		return r / (Math.PI / 180);
	}
	</script>
</head>
<body>
<h1>CANVAS test</h1>
<canvas id="pic" width="1000" height="1000"></canvas>
<script type="text/javascript">
	//var canvas = document.getElementById("pic");
	//var ctx = canvas.getContext("2d");
	var canvas = $("#pic");
	var ctx = canvas.get(0).getContext("2d");
	var x=0,y=0,len=160,pad=20;
	ctx.beginPath();
	ctx.strokeStyle = "red";
	ctx.moveTo(0,0);
	for(var i=0;i<=8;i++){
		ctx.lineTo(len,y);
		y+=pad;
		ctx.moveTo(0,y);
	}
	ctx.stroke();
	ctx.strokeStyle = "green";
	ctx.moveTo(0,0);
	for(var i=0;i<=8;i++){
		ctx.lineTo(x,len);
		x+=pad;
		ctx.moveTo(x,0);
	}
	//ctx.moveTo(0,180);
	var txt = "Hello World!!!";
	ctx.font = "100px serif";
	ctx.lineWidth = 10;
	ctx.strokeText(txt,0,300);
	ctx.fillText("hello world!",0,400);
	//ctx.moveTo(0,600);
	
	ctx.fillRect(0,600,100,100);
	ctx.strokeRect(0,600,100,100);
	ctx.closePath();
	ctx.stroke();
</script>
</body>
</html>